<template>
  <div>
    <el-row :gutter="24" type="flex" justify="center">
      <!-- 教师列表 -->
      <el-col :span="5"
        ><div class="grid-content bg-purple">
          <el-row :gutter="20">
            <!-- 列表 -->
            <el-card class="box-card" :body-style="{ padding: '30px' }">
              <div class="mask">
                <div class="userInfoBox">
                  <span>姓名： {{ userInfo.username }}</span>
                  <span>学院：{{ userInfo.college }}</span>
                  <span>职位：{{ userInfo.position }}</span>
                  <span>业绩总数：{{ userInfo.achievementsNum }}</span>
                  <span>注册时间：{{ userInfo.registerTime }}</span>
                </div>
              </div>
            </el-card>
          </el-row>
        </div></el-col
      >

      <!-- 内容 -->
      <el-col :span="18"
        ><div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '10px' }">
            <div slot="header" class="clearfix">
              <span></span>
            </div>
            <div class="mask content">
              <el-container style="height: 100%">
                <el-main>
                  <el-table
                    size="medium"
                    :data="msgList"
                    style="width: 100%"
                    highlight-current-row
                  >
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form
                          label-position="left"
                          inline
                          class="demo-table-expand teacherMsgListDataNameItem"
                        >
                          <el-tag
                            v-show="!props.row.data.length"
                            type="info"
                            size="medium"
                          >
                            无
                          </el-tag>
                          <el-tag
                            v-for="(item, index) in props.row.data"
                            v-show="props.row.data.length != 0"
                            :key="index"
                            type="default"
                            size="normal"
                            effect="plain"
                          >
                            {{ item.name }}
                          </el-tag>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column label="name" prop="name" width="300">
                    </el-table-column>
                    <el-table-column label="数量" prop="length">
                    </el-table-column>
                  </el-table>
                </el-main>
              </el-container>
            </div>
          </el-card></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "myHome",
  data() {
    return {
      userInfo: {
        name: "",
        college: "",
        admin: "",
        achievementsNum: 0,
      },
      msgList: [],
      // 添加对话框的信息
      personAddDialogVisible: false,
    };
  },
  methods: {
    async getTeacherList() {
      console.log(this.userInfo);
      let { data: res } = await this.$axios.get("/home/msg", {
        params: {
          name: this.userInfo.username,
        },
      });
      // console.log(res);
      this.msgList = res.data;
      let cacheLength = 0;
      this.msgList.forEach((item) => {
        if (item.length != 0) {
          cacheLength += item.length;
        }
      });
      this.userInfo.achievementsNum = cacheLength;
    },
  },
  computed: {
    ...mapState(["collegeList", "moreUserInfo"]),
  },
  async mounted() {
    this.userInfo = this.moreUserInfo;
    // 获取教师列表
    this.getTeacherList();
  },
};
</script>

<style lang="less" scoped>
.mask {
  caret-color: transparent;
  overflow: hidden;
  height: 0vh;
  animation: maskAni 1s forwards;
  .userInfoBox {
    display: flex;
    flex-direction: column;
    span {
      width: 100%;
      height: 50px;
      font-size: 20px;
      background-color: #e5e9f2;
      border-radius: 20px;
      line-height: 50px;
      margin-bottom: 12px;
      cursor: default;
    }
  }
}

// 内容
.mask.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  .el-card {
    width: 40%;
    height: 40%;
  }
  h1 {
    text-align: center;
  }
}

@keyframes maskAni {
  100% {
    height: 79vh;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

// gird外层框
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  border-radius: 20px;
  overflow: hidden;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// personItem
.el-collapse-item {
  cursor: default;
  div {
    margin-top: 10px;
    padding-left: 20px;
    border: 1px solid black;
    border-radius: 20px;
    border-top: transparent;
    border-bottom: transparent;
  }
}
</style>